<!DOCTYPE html>
<html lang="en">
<head>
    <%= require('./common/head.htm') %>
</head>
<style>
    html,body{

        height:100%;

    }
    p#EnterStore{
        text-align: center;
    }
    a#enter1{
        color: #ececec;
    }
    a#enter1:hover{
        color: #ffa07a;
    }
    p#EnterStoreSub{
        text-align: center;
    }

    @keyframes box {
        0% {transform: rotate(0);}
        25% {transform: rotate(0.25turn);}
        75%{transform: rotate(0.75turn);}
        100% {transform: rotate(1turn);}
    }
    @keyframes box2 {
        0% {background-color: rgba(242,166,135,0.1);border-radius: 5px;transform: rotate(0turn);}
        13%{background-color: rgba(242,166,135,0.3);border-radius: 8px;transform: rotate(0.1turn);}
        25% {background-color: rgba(242,166,135,0.5);border-radius: 10px;transform: rotate(0.3turn);}
        37% {background-color: rgba(242,166,135,0.3);border-radius: 8px;transform: rotate(0.4turn);}
        50% {background-color: rgba(242,166,135,0.1);    width: 25px;
            height: 25px;border-radius: 12px;transform: rotate(0.6turn);}
        63% {background-color: rgba(242,166,135,0.3);border-radius: 8px;transform: rotate(0.7turn);}
        75%{background-color: rgba(242,166,135,0.5);border-radius: 10px;transform: rotate(0.8turn);}
        88% {background-color: rgba(242,166,135,0.3);border-radius: 8px;transform: rotate(0.9turn);}
        100% {background-color: rgba(242,166,135,0.1);border-radius: 5px;transform: rotate(1turn);}
    }
    div.one {
        width: 100px;
        height: 100px;
        float: left;
        border: 3px solid black;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: box;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-direction: reverse;
    }
    div.two {
        width: 100px;
        height: 100px;
        float: left;
        border: 3px solid black;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: box;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        margin-left: 50px;
        animation-direction: alternate;
    }
    div.yuan1{
        width: 50px;
        height: 50px;
        float:left;
        left: 86%;
        top: 28%;
        border-radius: 30px;
        background-color: #ffa07a;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: box2;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        margin-left: 50px;
        animation-direction:normal;
    }
    div.yuan2{
        width: 50px;
        height: 50px;
        float:left;
        left: 82%;
        top: 28%;
        border-radius: 30px;
        background-color: #ffa07a;
        text-align: center;
        line-height: 100px;
        position: relative;
        animation-name: box2;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        margin-left: 50px;
        animation-direction:reverse;
    }
</style>
<body>
    <br/>
<div class="one"><a href="/manage/logIn" style="cursor:url('../images/cursor2.png'),auto;color: #cccccc">Backstage</a></div>
<!--<div class="one"><a href="/manage/backstageHome" style="cursor:url('images/cursor2.png'),auto;color: #cccccc">Backstage</a></div>-->
<div class="two"><a href="help.html" style="cursor:url('../images/cursor2.png'),auto;color: #333333">Help</a></div>
<br/>
<br/>
<div id="Content" style="background-color:rgba(0,0,0,0);" class="three">
    <h2 style="color: #ececec;font-size:80px;text-align:center;"> Welcome to MyPetStore</h2>
    <br><br>
    <p id="EnterStore">
        <i>
            <u>
                <a href="../view/catalog-main.html" style="font-size:40px;cursor:url('../images/cursor2.png'),auto;" id="enter1" > Enter the Store</a>
            </u>
        </i>
    </p>
    <br>
    <p id="EnterStoreSub"><sub style="color: #ececec;"> Copyright www.csu.edu.cn </sub></p>
</div>
<div class="yuan1"></div>
<div class="yuan2"></div>
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
</body> 
</html>